import "../styles/Index.scss"
import { Layout ,Button, Dropdown, Space,FloatButton } from 'antd';
import React,{useState,useEffect} from 'react';
import { Outlet, useNavigate,NavLink } from 'react-router-dom'
import { Menu, Avatar } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import { HomeFilled, AppstoreOutlined, SettingFilled, CheckSquareFilled, PropertySafetyFilled, CaretDownOutlined } from '@ant-design/icons';
import piczsq from '../images/zsq.png'
import Home from './Index/Home'
const { Header, Footer, Sider, Content } = Layout;
interface Props {

}
interface MenuItem {
    item: object
    key: string
}
interface MenuProps{
    items:any
}
function Index(props: Props) {
    var navigate = useNavigate();

    var handleClick = function ({ item, key }: MenuItem) {
        navigate(key);
    }
    var beat =()=>{

    }
    const items: MenuProps['items'] = [
        {
          key: '1',
          label: (
            <NavLink to='/index/systemsettings/changepassword'>修改密码</NavLink>
            // <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
            //   修改密码
            // </a>
          ),
        },
        {
          key: '2',
          label: (
            <NavLink to='/login'>退出登录</NavLink>
          ),
        },
      ];
      const App: React.FC = () => <FloatButton tooltip={<div>Documents</div>} />;
    return (
        // <div className='index'>
        <Layout className='index'>
            <Sider style={{ width: 300 }}>
                <div className="top">
                    <div className="jiuwei">
                        <img src="https://img0.baidu.com/it/u=4258447227,1423421538&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" />
                        <span>九尾医疗服务后台</span>
                    </div>
                </div>
                <div className="bottom">
                    <Menu className='mymenu' theme='light' mode='inline' defaultSelectedKeys={['/index/systemmanage']} onClick={handleClick}>
                        <Menu.Item key="/index/home" icon={<HomeFilled />}>首页</Menu.Item>
                        {/* <Menu.SubMenu key="/index/home" title="首页" icon={<AppstoreOutlined />}>
                </Menu.SubMenu> */}
                <Menu.SubMenu key="/index/bookingmanagement" title="预约管理" icon={<CheckSquareFilled />}>
                    <Menu.Item key="/index/bookingmanagement/registration">预约挂号</Menu.Item>
                    <Menu.Item key="/index/bookingmanagement/nuclein" >预约核酸检测</Menu.Item>
                    <Menu.Item key="/index/bookingmanagement/physical" >预约体检</Menu.Item>
                    <Menu.Item key="/index/bookingmanagement/arrange" >预约须知</Menu.Item>
                </Menu.SubMenu>
                <Menu.SubMenu key="/index/expensemanagement" title="费用管理" icon={<PropertySafetyFilled />}>
                    <Menu.Item key="/index/expensemanagement/outpatientconsumption" >门诊消费记录</Menu.Item>
                    <Menu.Item key="/index/expensemanagement/outpatientrecharge" >门诊充值记录</Menu.Item>
                    <Menu.Item key="/index/expensemanagement/inpatientconsumption" >住院消费记录</Menu.Item>
                    <Menu.Item key="/index/expensemanagement/inpatientrecharge" >住院充值记录</Menu.Item>
                    <Menu.Item key="/index/expensemanagement/refundrecord" >退款记录</Menu.Item>
                </Menu.SubMenu>
                <Menu.SubMenu key="/index/hospitalinformation" title="医院信息" icon={<AppstoreOutlined />}>
                    <Menu.Item key="/index/hospitalinformation/doctormanagement" >医生管理</Menu.Item>
                    <Menu.Item key="/index/hospitalinformation/departmentmanagement" >科室管理</Menu.Item>
                    <Menu.Item key="/index/hospitalinformation/physicalexaminationpackage" >体检套餐</Menu.Item>
                    <Menu.Item key="/index/hospitalinformation/encyclopediaofHealth" >健康百科</Menu.Item>
                    <Menu.Item key="/index/hospitalinformation/hospitalnavigation" >医院导航</Menu.Item>
                    <Menu.Item key="/index/hospitalinformation/hospitalintroduction" >医院简介</Menu.Item>
                    <Menu.Item key="/index/hospitalinformation/appointmentnotice" >预约须知</Menu.Item>
                </Menu.SubMenu>
                <Menu.SubMenu key="/index/systemsettings" title="系统设置" icon={<SettingFilled />}>
                    <Menu.Item key="/index/systemsettings/administrator" >管理员管理</Menu.Item>
                    <Menu.Item key="/index/systemsettings/role" >角色管理</Menu.Item>
                    <Menu.Item key="/index/systemsettings/professionaltitle " >职称管理</Menu.Item>
                    <Menu.Item key="/index/systemsettings/news" >消息公告</Menu.Item>
                    <Menu.Item key="/index/systemsettings/changepassword" >修改密码</Menu.Item>
                </Menu.SubMenu>
            </Menu>
                </div>
            </Sider>
            <Content>
                <div className="nav">
                    <div className="role" onMouseMove={beat}>
                        {/* <Avatar size="large" icon={<UserOutlined />} />
                        <span>Sam</span>
                        <CaretDownOutlined /> */}
                    </div>
                    <Dropdown menu={{ items }} placement="bottom">
                    <div className="role" onMouseMove={beat}>
                        <Avatar size="large" icon={<UserOutlined />} />
                        <span>Sam</span>
                        <CaretDownOutlined />
                    </div>
                        {/* <Button>bottom</Button> */}
                    </Dropdown>
                    
                </div>
                <Outlet></Outlet>
                <FloatButton tooltip={<img src={piczsq} style={{width:150,height:150}}/>} />
            </Content>
        </Layout>
        // </div>
    );
}

export default Index;